import React from 'react';
import { format } from 'date-fns';
import { Check, Plus, Trash2 } from 'lucide-react';
import { TodoItem } from '../types';

interface TodoListProps {
  date: Date;
  todos: TodoItem[];
  onToggleTodo: (id: string) => void;
  onAddTodo: (content: string) => void;
  onDeleteTodo: (id: string) => void;
}

export function TodoList({ date, todos, onToggleTodo, onAddTodo, onDeleteTodo }: TodoListProps) {
  const [newTodo, setNewTodo] = React.useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (newTodo.trim()) {
      onAddTodo(newTodo.trim());
      setNewTodo('');
    }
  };

  return (
    <div className="bg-white rounded-lg shadow p-4">
      <h2 className="text-xl font-semibold mb-4">
        {format(date, 'yyyy-MM-d')} 待办任务
      </h2>

      <form onSubmit={handleSubmit} className="mb-4 flex gap-2">
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="添加新的任务..."
          className="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          type="submit"
          className="bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600"
        >
          <Plus size={20} />
        </button>
      </form>

      <div className="space-y-2">
        {todos.map((todo) => (
          <div
            key={todo.id}
            className="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg group"
          >
            <button
              onClick={() => onToggleTodo(todo.id)}
              className={`w-5 h-5 rounded border flex items-center justify-center
                ${todo.completed ? 'bg-green-500 border-green-500' : 'border-gray-300'}`}
            >
              {todo.completed && <Check size={16} className="text-white" />}
            </button>
            <span className={`flex-1 ${todo.completed ? 'line-through text-gray-500' : ''}`}>
              {todo.content}
            </span>
            <button
              onClick={() => onDeleteTodo(todo.id)}
              className="text-red-500 opacity-0 group-hover:opacity-100 transition-opacity"
            >
              <Trash2 size={16} />
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}